<template>
    <div class="time-form">
        <div class="label-item">
            <div class="label">每轮运动时长：{{ data.sportsMinutes }}分钟</div>
            <div class="slider-wrapper">
                <van-slider
                    v-model="data.sportsMinutes"
                    :min="1"
                    :max="10"
                    :step="1"
                >
                    <template #button>
                        <div class="custom-button">
                            {{ data.sportsMinutes }}
                        </div>
                    </template>
                </van-slider>
            </div>
        </div>
        <div class="label-item">
            <div class="label">每轮休息时长：{{ data.restMinutes }}分钟</div>
            <div class="slider-wrapper">
                <van-slider
                    v-model="data.restMinutes"
                    :min="1"
                    :max="10"
                    :step="1"
                >
                    <template #button>
                        <div class="custom-button">
                            {{ data.restMinutes }}
                        </div>
                    </template>
                </van-slider>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { watch } from 'vue';
import { watchEffect } from 'vue';
import { reactive } from 'vue';

const emit = defineEmits(['update:sportsMinutes', 'update:restMinutes']);
const props = defineProps({
    sportsMinutes: {
        type: Number,
        default: 0,
    },
    restMinutes: {
        type: Number,
        default: 0,
    },
});

const data = reactive({
    sportsMinutes: 0,
    restMinutes: 0,
});

watchEffect(() => {
    data.sportsMinutes = props.sportsMinutes;
    data.restMinutes = props.restMinutes;
});

watch(
    () => data.sportsMinutes,
    (to) => {
        emit('update:sportsMinutes', to);
    }
);
watch(
    () => data.restMinutes,
    (to) => {
        emit('update:restMinutes', to);
    }
);
</script>

<style lang="scss" scoped>
.time-form {
    .label-item {
        .label {
            padding-bottom: 20px;
        }
    }
    .label-item ~ .label-item {
        margin-top: 50px;
    }
    .custom-button {
        width: 50px;
        height: 50px;
        color: #fff;
        font-size: 24px;
        background-color: var(--van-primary-color);
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
    }
    .slider-wrapper {
        padding: 16px 25px;
        --van-slider-bar-height: 10px;
    }
}
</style>
